<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    用户名： <input type="text" /> <span id="tip"></span> <br />
    <button id="btn">点击按钮查看用户名是否可用</button>

    <script>
      const btn = document.querySelector('#btn')
      const tip = document.querySelector('#tip')
      btn.onclick = function () {
        // 获取用户输入的用户名
        const name = document.querySelector('input[type=text]').value.trim()
        // 1. 创建xhr
        const xhr = new XMLHttpRequest()
        // 2. 设置请求方式和url地址
        xhr.open('post', 'http://localhost:5000/check')
        // 3. 设置请求头
        // xhr.setRequestHeader('键','值')
        // 作用: post请求有请求主体,通过content-type描述请求主体中数据的格式
        // 注意: 如果post请求时,忘记设置请求头,或书写错误.请求可以正常发送到服务器,但是服务器无法正常读取数据
        xhr.setRequestHeader('content-type', 'application/json')

        // 4. 设置请求主体并发送请求
        xhr.send(`{"name":"${name}"}`) //{"name":123}

        // 接收响应
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              const data = JSON.parse(xhr.responseText)
              // if (data.success) {
              //   tip.style.color = 'green'
              // } else {
              //   tip.style.color = 'red'
              // }
              data.success
                ? (tip.style.color = 'green')
                : (tip.style.color = 'red')
              tip.innerText = data.message
            } else {
              console.log('请求失败')
            }
          }
        }
      }
    </script>
  </body>
</html>
